<template>
	<!-- 购买服务 -->
	<div>
		<headpage username="产品及服务"  routername="main1"></headpage>
		<ul class="list">
			<li>购买服务</li>
			<li>所有订单</li>
			<li>未付款</li>
			<li>已付款</li>
		</ul>
		<div>
			<ul class="list2">
				<li>
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-beizi"></use>
					</svg>账户管理
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-beizi"></use>
					</svg>短信服务
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-canju"></use>
					</svg>增值服务
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-bolanggu"></use>
					</svg>周边设备
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-paozao"></use>
					</svg>商城服务
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-wanjuqiu"></use>
					</svg>兑换码
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-wanjuche"></use>
					</svg>金币充值
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-naiping"></use>
					</svg>连锁门店套餐
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import headpage from"../headpage.vue"
	export default{
		name:"purchase_services",
		components:{
			headpage
		}
	}
</script>

<style scoped="scoped">
	ul,li{
		margin:0;
		padding:0;
		list-style: none;
	}
	.list{
		display: flex;
		text-align:center;
		justify-content: center;
	}
	.list li {
		width:50%;
		line-height:30px;
		padding:5px 0 5px 0;
	}
	.list li:hover{
		color:lightblue;
		border-bottom:1px solid lightblue;
	}
	.icon {
	  width: 1em;
	  height: 1em;
	  vertical-align: -0.15em;
	  fill: currentColor;
	  overflow: hidden;
	}
	
	.list2{
		line-height:40px;
		justify-content: center;
	}
	.list2 li{
		border:1px solid red;
		margin:20px;
		text-align: center;
		border-radius: 99em;
		color:white;
	}
	.list2 li:nth-child(1){
		background-color: lightblue;
	}
	.list2 li:nth-child(2){
		background-color: lightcoral;
	}
	.list2 li:nth-child(3){
		background-color: lightcyan;
	}
	.list2 li:nth-child(4){
		background-color: lightgoldenrodyellow;
	}
	.list2 li:nth-child(5){
		background-color: lightgray;
	}
	.list2 li:nth-child(6){
		background-color: lightgreen;
	}
	.list2 li:nth-child(7){
		background-color: lightgrey;
	}
	.list2 li:nth-child(8){
		background-color: lightpink;
	}
</style>
